<template>
  <div id="app" v-bind:style="appDivStyle">
    <div class="context" ref="context">
      <div class="queryBox" ref="queryBox">
        <el-form :inline="true" :model="formQueryCondition" ref="form" size="mini">
          <el-form-item :label="$t('queryLabel.product.productName')" :label-width="queryformLabelWidth">
            <el-input v-model.trim="formQueryCondition.productName.val" class="queryItemStyle" clearable
                      :placeholder="$t('queryLabel.product.placeholderProductName')">
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('queryLabel.product.productCode')" :label-width="queryformLabelWidth">
            <el-input v-model.trim="formQueryCondition.productCode.val" class="queryItemStyle" clearable
                      :placeholder="$t('queryLabel.product.placeholderProductCode')">
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('queryLabel.product.tariffsType')" :label-width="queryformLabelWidth">
            <el-select v-model.trim="formQueryCondition.tariffsType.val" class="queryItemStyle" placeholder="请选择">
              <el-option :label="$t('label.all')" value=""></el-option>
              <el-option :label="$t('label.available')" value="Available"></el-option>
              <el-option :label="$t('label.invalid')" value="Invalid"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('queryLabel.product.reportStatus')" :label-width="queryformLabelWidth">
            <el-select v-model.trim="formQueryCondition.reportStatus.val" class="queryItemStyle" placeholder="请选择">
              <el-option :label="$t('label.all')" value=""></el-option>
                <el-option :label="$t('label.available')" value="Available"></el-option>
                <el-option :label="$t('label.invalid')" value="Invalid"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('queryLabel.product.productStatus')" :label-width="queryformLabelWidth">
            <el-select v-model.trim="formQueryCondition.productStatus.val" class="queryItemStyle" placeholder="请选择">
              <el-option :label="$t('label.all')" value=""></el-option>
              <el-option :label="$t('label.available')" value="Available"></el-option>
                <el-option :label="$t('label.invalid')" value="Invalid"></el-option>
            </el-select>
          </el-form-item>

          <div style="text-align:right">
             <el-form-item>
                <el-button type="primary" @click="onNew">{{ $t('btnText.newBtnText') }}</el-button>
             </el-form-item>
            <el-form-item>
             <el-button type="primary" @click="onReset('form')">{{ $t('btnText.resetBtnText') }}</el-button>
             </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onQuery" icon="el-icon-search" :loading="loading">
                {{$t('btnText.queryBtnText')}}
              </el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <!--数据网格-->
      <div class="dataBox" ref="dataBox">
        <transition enter-active-class="animated zoomIn" leave-active-class="animated rotateOut">
                <el-table v-if="isInit" ref="singleTable"
                            :data="tableData"
                            :height="tableHeight"
                            @sort-change="sortChange"
                            v-loading="loading" size="mini"
                            style="width: 100%;" stripe=stripe border=border>
                    <el-table-column type="index"  width="50" fixed="left"
                                        :label="$t('table.xh')" align="center">
                    </el-table-column>
                    <el-table-column :label="$t('table.op')" fixed="left" min-width="150">
                      <template slot-scope="scope">
                        <el-button size="gv" icon="el-icon-edit" :loading="loading"
                            @click="edit(scope.$index, scope.row)">{{ $t('btnText.editBtnText') }}</el-button>
                        <el-button size="gv" type="danger" icon="fa fa-edit" :loading="loading" @click="editMenu(scope.$index, scope.row)">
                                {{ $t('btnText.offLine') }}
                        </el-button>
                      </template>
                    </el-table-column>
                    <el-table-column prop="productName" min-width="110" fixed="left"
                                        :label="$t('table.product.productName')" sortable="custom" sort-by="productName">
                    </el-table-column>
                    <el-table-column prop="productType" min-width="110" fixed="left"
                                        :label="$t('table.product.productType')" sortable="custom" sort-by="productType">
                    </el-table-column>
                    <el-table-column prop="tariffsType" min-width="130"
                    :label="$t('table.product.tariffsType')" sortable="custom" sort-by="tariffsType">
                    </el-table-column>
                    <el-table-column prop="productCode" min-width="150"
                    :label="$t('table.product.productCode')" sortable="custom" sort-by="productCode">
                    </el-table-column>
                    <el-table-column prop="productPrice" min-width="150"
                    :label="$t('table.product.productPrice')" sortable="custom" sort-by="productPrice">
                    </el-table-column>
                    <el-table-column prop="status" min-width="150"
                    :label="$t('table.product.status')" sortable="custom" sort-by="status">
                    </el-table-column>
                    <el-table-column prop="reportStatus" min-width="150"
                    :label="$t('table.product.reportStatus')" sortable="custom" sort-by="reportStatus">
                    </el-table-column>
                    <el-table-column prop="createTime" min-width="150"
                    :label="$t('table.product.createTime')" sortable="custom" sort-by="createTime">
                    </el-table-column>

                </el-table>
        </transition>
            </div>
    </div>
     <div class="pageBox">
            <el-pagination @size-change="sizeChange"
                            @current-change="currentPageChange"
                            :current-page="pager.curPage"
                            :page-sizes="pager.sizes"
                            :page-size="pager.curSize"
                            :background="true"
                            layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
            </el-pagination>
     </div>

         <!--编辑对话框-->
      <transition enter-active-class="animated rotateIn" leave-active-class="animated rotateOut">
        <el-dialog :title="$t('label.dialogTitle')" :visible.sync="isShowEditForm" top="5vh">
            <el-form :inline="true" :model="editForm" ref="editForm" size="mini"
                     :label-position="editFormPosition" status-icon=status-icon :rules="editRules">
                <el-form-item :label="$t('editLabel.product.productName')"
                              :label-width="editformLabelWidth" prop="productName">
                    <el-input v-model.trim="editForm.productName" maxlength="50"
                              :placeholder="$t('editLabel.product.placeholderName')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('editLabel.product.productCode')" :label-width="editformLabelWidth" prop="productCode">
                    <el-input v-model.trim="editForm.code" maxlength="20"
                              :placeholder="$t('editLabel.product.placeholderCode')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('editLabel.product.tariffsType')" :label-width="editformLabelWidth">
                    <el-select v-model="editForm.tariffsType" style="width:180px;">
                        <el-option :label="$t('label.available')" value="Available"></el-option>
                        <el-option :label="$t('label.invalid')" value="Invalid"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('editLabel.product.automaticRenew')" :label-width="editformLabelWidth">
                    <el-select v-model="editForm.automaticRenew" style="width:180px;">
                        <el-option :label="$t('label.available')" value="Available"></el-option>
                        <el-option :label="$t('label.invalid')" value="Invalid"></el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item :label="$t('editLabel.product.periodicUnit')" :label-width="editformLabelWidth">
                    <el-select v-model="editForm.periodicUnit" style="width:180px;">
                        <el-option :label="$t('label.available')" value="Available"></el-option>
                        <el-option :label="$t('label.invalid')" value="Invalid"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('editLabel.product.periodicNum')" :label-width="editformLabelWidth" prop="periodicNum">
                    <el-input v-model.trim="editForm.periodicNum"
                              :placeholder="$t('editLabel.product.placeholderPeriodicNum')"></el-input>
                </el-form-item>
                 <el-form-item :label="$t('editLabel.product.productPrice')" :label-width="editformLabelWidth" prop="productPrice">
                    <el-input v-model.trim="editForm.productPrice" maxlength="20"
                              :placeholder="$t('editLabel.product.placeholderProductPrice')"></el-input>
                </el-form-item>
                  <el-form-item :label="$t('editLabel.product.productType')" :label-width="editformLabelWidth">
                    <el-select v-model="editForm.productType" style="width:180px;">
                        <el-option :label="$t('label.available')" value="Available"></el-option>
                        <el-option :label="$t('label.invalid')" value="Invalid"></el-option>
                    </el-select>
                </el-form-item>
              <el-form-item :label="$t('editLabel.product.effectiveTimeS')" :label-width="editformLabelWidth" >
                  <el-date-picker v-model="editForm.effectiveTimeS" class="queryItemStyle" placeholder="请选择">
                  </el-date-picker>
              </el-form-item>
            <el-form-item :label="$t('editLabel.product.effectiveTimeE')" :label-width="editformLabelWidth" >
              <el-date-picker v-model="editForm.effectiveTimeE" class="queryItemStyle" placeholder="请选择">
              </el-date-picker>
            </el-form-item>
            <el-row>
              <el-form-item :label="$t('editLabel.product.applicablePlatform')" :label-width="editformLabelWidth">
                  <el-checkbox-group v-model="editForm.applicablePlatform" style="width:490px;">
                    <el-checkbox label="河南嗨看（豫南）" name="applicablePlatform" style="display:none"></el-checkbox>
                    <el-checkbox label="河南嗨看（豫北）" name="applicablePlatform"></el-checkbox>
                    <el-checkbox label="河南嗨看（豫南）" name="applicablePlatform"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
            </el-row>
                <el-form-item :label="$t('editLabel.product.service')" :label-width="editformLabelWidth" prop="service">
                    <el-input v-model.trim="editForm.periodicNum" maxlength="20" style="width:490px;" ></el-input>
                </el-form-item>
              <el-row>
                  <el-form-item :label="$t('editLabel.product.icon')" :label-width="editformLabelWidth" prop="icon">
                    <el-input type="file" name="fileUpload" style="width:490px;">
                    </el-input>
                </el-form-item>
              </el-row>
                 <el-form-item :label="$t('editLabel.product.backgroundPicture')" :label-width="editformLabelWidth" prop="backgroundPicture">
                    <el-input type="file" name="fileUpload" style="width:490px;">
                    </el-input>
                </el-form-item>
            <el-row>
                <el-form-item :label="$t('editLabel.product.remarks')" :label-width="editformLabelWidth" prop="remarks">
                  <el-input type="textarea" :rows="2"  placeholder="请输入内容" style="width:490px;" ></el-input>
                </el-form-item>
            </el-row>
            </el-form>
            <div slot="footer">
                <el-button size="mini" @click="isShowEditForm = false" :loading="loading">{{ $t('btnText.cancelBtnText') }}</el-button>
                <el-button size="mini" type="primary" @click="submitForm('editForm')" :loading="loading">{{ $t('btnText.saveBtnText') }}</el-button>
            </div>

        </el-dialog>
      </transition>
  </div>
</template>

<script>
import comBaseVue from '../../baseViewModel';
export default {
  mixins: [comBaseVue],
  name:'Product',
  data(){
    return {
        isInit:false,
        tableHeight:100,
        appDivStyle:{
            height:this.$store.getters.appHeight,
        },
        modelName:"product.model.Product",
        formQueryCondition: {
            productName:{
              val:'',//查询的值
              op:'LIKE' //操作符
            },
            productCode:{
              val:'',
              op:"like"
            },
            tariffsType:{
              val:''
            },
            reportStatus:{
              val:''
            },
            productStatus:{
              val:''
            }
        },
        // 编辑面板绑定的对象
        editForm: {
            keyID: 0,
            version: 0,
            productName: "",
            productCode: "",
            tariffsType: "",
            automaticRenew: "",
            periodicUnit: "",
            periodicNum: "",
            productPrice: "",
            productType: "",
            effectiveTimeS: "",
            effectiveTimeE: "",
            applicablePlatform:[],
            service: "",
            icon:"",
            backgroundPicture:"",
            remarks: "",

        },
    }
  },
  methods:{
    onReset:function(){
        if (this.$refs['form']) {
            this.$refs['form'].resetFields();
        }
        this.formQueryCondition.productName.val = "";
        this.formQueryCondition.productCode.val = "";
        this.formQueryCondition.tariffsType.val = "";
        this.formQueryCondition.reportStatus.val = "";
        this.formQueryCondition.productStatus.val = "";
    },
    // 新增
    onNew: function() {
        this.isShowEditForm = true;
        if (this.$refs['editForm']) {
            this.$refs['editForm'].resetFields();
        }
        this.editForm.keyID = "";
        this.editForm.version = "";
        this.editForm.productName = "";
        this.editForm.productCode = "";
        this.editForm.periodicUnit = "";
        this.editForm.periodicNum = "";
        this.editForm.tariffsType = "";
        this.editForm.automaticRenew = "";
        this.editForm.productPrice = "";
        this.editForm.productType = "";
        this.editForm.applicablePlatform = [];
        this.editForm.effectiveTimeS = "";
        this.editForm.effectiveTimeE = "";
        this.editForm.service = "";
        this.editForm.icon = "";
        this.editForm.backgroundPicture = "";
        this.editForm.remarks = "";
        this.curCommand = "SaveNew";
        this.canEditCode = false;
    },
       // 编辑按钮回调事件
    editCallback: function(isSuccess,json) {
        if(isSuccess){
            this.curCommand = "UpdateProc";
            this.isShowEditForm = true;
            if (this.$refs['editForm']) {
                this.$refs['editForm'].resetFields();
            }
            this.editForm.keyID = json.keyID;
            this.editForm.version = json.version;
            this.editForm.productName = json.productName;
            this.editForm.productCode = json.productCode;
            this.editForm.periodicUnit = json.periodicUnit;
            this.editForm.periodicNum = json.periodicNum;
            this.editForm.tariffsType = json.tariffsType;
            this.editForm.automaticRenew = json.automaticRenew;
            this.editForm.productPrice = json.productPrice;
            this.editForm.productType = json.productType;
            this.editForm.applicablePlatform = json.applicablePlatform;
            this.editForm.effectiveTimeS = json.effectiveTimeS;
            this.editForm.effectiveTimeE = json.effectiveTimeE;
            this.editForm.service = json.service;
            this.editForm.icon = json.icon;
            this.editForm.backgroundPicture = json.backgroundPicture;
            this.editForm.remarks = json.remarks;
            this.editForm.isEnabled = json.isEnabledVal;
            this.canEditCode = true;
        }
        else{
            this.$message({
                message: json.msg,
                type: 'warning'
                });
        }
    },
    editMenu:function(){
      this.$message({
                message: this.$i18n.t("操作成功"),
                type: 'success'
                });
    }
  },
   mounted: function mounted() {
    this.tableHeight = this.$refs.context.offsetHeight - this.$refs.queryBox.offsetHeight;
    this.isInit = true;
    this.onQuery();

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>


